<!--
 * @Date: 2024-12-05 14:03:21
 * @Author: LiSong
 * @LastEditors: ZHM
 * @LastEditTime: 2025-03-07 11:39:11
 * @Description: 路径参数弹窗
-->
<template>
  <HpDialog v-model="dialogState.visiable"
    class="par-dialog-body"
    title="路径参数配置"
    top="12vh"
    width="50%"
    height="60%"
    @close="handleClose"
    @confirm="handleConfirm">
    <div>
      <el-form-item label="routeState">
        <el-input v-model="parState.routeState"
          placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="routeQuery">
        <el-input v-model="parState.routeQuery"
          placeholder="请输入"></el-input>
      </el-form-item>
    </div>
  </HpDialog>
</template>

<script setup>
import { nextTick, reactive, ref } from 'vue';

import HpDialog from '@hp/comps/dialog/src/HpDialog.vue'

const emits = defineEmits(['confirm'])

const dialogState = reactive({
  visiable: false,
})

// 数据集
const parState = reactive({
  routeState: '',
  routeQuery: '',
})

// 数据集
let rowId = null

const handleOpen = ({ ...row }) => {
  parState.routeState = row.routeState
  parState.routeQuery = row.routeQuery
  rowId = row.id
  dialogState.visiable = true
}
const handleReset = () => {
  parState.routeState = null
  parState.routeQuery = null
  rowId = null
}
const handleClose = () => {
  handleReset()
  dialogState.visiable = false
}

const handleConfirm = () => {
  emits('confirm', parState, rowId)
  handleReset()
  dialogState.visiable = false
}

defineExpose({
  handleOpen
})

</script>

<style lang="scss" scoped>
.par-dialog-body {
	padding-top: 20px;
}
</style>
 